<template>
  <div class>
    <mt-header v-bind:title="msg">
    </mt-header>
    <mt-cell v-for="topic in topics" v-bind:key="topic.id" :title="topic.title" v-bind:label="topic.updated_at"  @click.native="goDetail(topic)" value="查看"></mt-cell>
    <mt-tabbar v-model="selected" @click.native="next" fixed>
      <mt-tab-item id="1">
        <img slot="icon" src="../assets/home.png">
        首页
      </mt-tab-item>
      <mt-tab-item id="2">
        <img slot="icon" src="../assets/pic.png">
        图片
      </mt-tab-item>
      <mt-tab-item id="3">
        <img slot="icon" src="../assets/blog_active.png">
        文章
      </mt-tab-item>
      <mt-tab-item id="4">
        <img slot="icon" src="../assets/user.png">
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  name: "blogindex",
  data() {
    return {
      msg: "blog index",
      selected: "3",
      topics:[{
            "id": 105,
            "title": "默认第一篇",
            "body": "dsgfdsgdhfghfghfg",
            "user_id": 1,
            "category_id": 2,
            "reply_count": 0,
            "view_count": 0,
            "last_reply_user_id": 0,
            "excerpt": "postman addd",
            "slug": null,
            "created_at": "2019-01-09 16:22:26",
            "updated_at": "2019-01-09 16:22:26"
        },
        {
            "id": 104,
            "title": "默认第二篇",
            "body": "dsgfdsgdhfghfghfg",
            "user_id": 1,
            "category_id": 2,
            "reply_count": 0,
            "view_count": 0,
            "last_reply_user_id": 0,
            "excerpt": "postman addd",
            "slug": null,
            "created_at": "2019-01-09 16:20:51",
            "updated_at": "2019-01-09 16:20:51"
        }]
    };
  },
  mounted: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' , this.topics)
    let that = this;
    this.$http({
      method: 'get',
      url: 'http://api.lb.com/api/topics',
      data: {
        name: 'wise',
        info: 'wrong'
      }
   }).then(function(response) {
     if(response.status == 200 && response.data){
       let topics = response.data.data;
       that.topics = topics;
       console.log(22)
     }
    // console.log(response.data);
    // console.log(response.status);
    // console.log(response.statusText);
    // console.log(response.headers);
    // console.log(response.config);
  });
  },
  methods: {
    next() {
      console.log(this.selected);
      if (this.selected == 1) {
        this.$router.push("myapp"); //https://router.vuejs.org/zh/guide/essentials/navigation.html
      }
      if (this.selected == 2) {
        this.$router.push("images"); //https://router.vuejs.org/zh/guide/essentials/navigation.html
      }
      if (this.selected == 3) {
        this.$router.push("blogs"); //https://router.vuejs.org/zh/guide/essentials/navigation.html
      }
      if (this.selected == 4) {
        this.$router.push("user"); //https://router.vuejs.org/zh/guide/essentials/navigation.html
      }
      return true;
    },
    goDetail(item) {
      console.log(item);
      this.$router.push({ path: 'blogs_detail', query: { id: item.id }})
    }
  }
};
</script>
<style>
#app{
  text-align: left;
}
</style>
